<template>
	<view class="u-page">
		<view style="position: fixed;z-index: 200;bottom: 150rpx;right: 120rpx;">
			<view @click="addClassCircle" class="publishIcon">
				<label>发布</label>
			</view>
		</view>
		<!-- 主要设置背景图片，个人头像（固定），切换班级 -->
		<view class="u-top">
			<view class="u-top-context">
				<view class="u-top-left">
					<u-image src="/static/edu/fmale.PNG" :width="personWidth" :height="personHeight"/>
					<view class="u-top-name">
						<u--text :text="personContext.userName" ></u--text>
						<u--text :text="personContext.departName" type="info" size="10"></u--text>
					</view>
				</view>
				<!-- <view class="u-top-buttom">
					
				</view> -->
				<view class="u-top-buttom"> 
				   <u-button text="切换班级" size="mini" icon="/static/edu/toggle.PNG" plain type="info" @click="showPopup"></u-button>
				</view>
			</view>
		</view>
		<view class="u-context" v-for="(context, index) in contextList">
			<view class="u-context_for">
				<view class="u-context-left">
					<u-image src="/static/edu/male.PNG" :width="personLogWidth" :height="personLogHeight"/>
				</view>
				<view class="u-context-right"> 
					<u--text :text="context.userName" type="info" size="20" ></u--text>
					<u--text :text="context.departName" type="info" size="8" ></u--text>
					<view :style="{ marginBottom: '30rpx'}" class="u-context-text">
						<!-- <u-parse class="u-parse-text" :content="context.context"></u-parse> -->
						<!-- <u--text :text="context.context" size="12"></u--text> -->
						<rich-text :nodes="context.context" class="u-parse-text"></rich-text>
					</view>
					<view class="uni-uploader__files">
						<view class="uni-uploader__file" v-for="(image, index) in context.imageList" :key="index">
							<image :src="image.url" :data-src="image.url" 
								:style="otherLogStyle" @click="previewImage"></image>
						</view>
						<view class="uni-uploader__file" v-for="(file, index) in context.fileList">
							<view class="file-context" :style="otherLogStyle">
								<view class="file-image">
									<image src="/static/edu/doc.PNG" :style="fileStyle" v-if="file.type=='doc'"></image>
									<image src="/static/edu/xls.PNG" :style="fileStyle" v-if="file.type=='xls'"></image>
									<u--text :text="file.fileName" size="10" type="info" align="center"></u--text>
								</view>
							</view>
						</view>
						<view class="uni-uploader__file" v-for="(video, index) in context.videoList" >
							<video :id="video.id" :src="video.url" :style="otherLogStyle" 
								@play="play(video.id)" @fullscreenchange="fullscreenchange"></video>
						</view>
					</view>
				</view>
			</view>
		    <view class="u-context_for-bottom"></view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="departname" @cancel="cancel" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {uniLink} from '@dcloudio/uni-ui';
	import config from '@/common/config';
	export default {
		components: {
			uniLink
		},
		data() {
			return {
				index:0,
				show: false,
				personContext: {
				},
				contextList: [{
				}],
				albumWidth: 1,
				columns: [
				],
				classList:[],
				departId: '',
				width: '',
				queryParam : {
					pageIndex: 1,
					pageSize: 6,
					departId: undefined,
				},
				videoContext: undefined,
				personWidth: '',
				personHeight: '',
				personLogWidth: '',
				personLogHeight: '',
			}
		},
		created() {
			this.getClassList();
			this.personLogStyle();
		},
		mounted() {
		},
		onReachBottom() {
			let indexs = this.queryParam.pageSize * this.queryParam.pageIndex;
			this.queryParam.pageIndex = this.queryParam.pageIndex + 1;
			this.$u.api.getClass(this.queryParam).then(response => {
				if (response.data.length <= 0) {
					return;
				}
				let list = response.data;
				indexs = indexs + 1;
				list.forEach((items) => {
					items.imageList.forEach((item) => {
						item.url = config.baseUrl.concat(item.srcPath);
					});
					items.fileList.forEach((item) => {
						item.url = config.baseUrl.concat(item.srcPath);
						const extension = item.srcPath.substring(item.srcPath.lastIndexOf('.') + 1);
						if (extension == 'xls' || extension == 'xlsx' ) {
							item.type = "xls";
						}
						if (extension == 'doc' || extension == 'docx' ) {
							item.type = "doc";
						};
					});
					items.videoList.forEach((item, index) => {
						item.url = config.baseUrl.concat(item.srcPath);
						item.id = "video_" + indexs + "_" + index ;
					});
				});
				this.contextList = this.contextList.concat(list);
			});
		},
		methods: {
			showPopup(){
				this.show = true;
			},
			cancel() {
				this.show = false;
			},
			confirm(e) {
				this.queryParam.departId = e.value[0].departid;	
				this.getClass();
				this.getPerson();
				this.show = false;
			},
			getClassList(){
				this.$u.api.getClassList().then(response => {
					// 获取登陆人的班级，默认取第一个
					this.classList = response.data;
					this.columns.push(response.data);
					if (this.classList.length > 0) {
						this.queryParam.departId = this.classList[0].departid;	
						this.getClass();
						this.getPerson();
					}
				});
			},
			getPerson() {
				let param = {
					departId : this.queryParam.departId
				};
				this.$u.api.getPerson(param).then(response => {
					this.personContext = response.data;
				});
			},
			getClass(){
				this.$u.api.getClass(this.queryParam).then(response => {
					this.contextList = response.data;
					if (this.contextList.length == 0) {
						return;
					}
					this.contextList.forEach((items, indexs) => {
						items.imageList.forEach((item) => {
							item.url = config.baseUrl.concat(item.srcPath);
						});
						items.fileList.forEach((item) => {
							item.url = config.baseUrl.concat(item.srcPath);
							const extension = item.srcPath.substring(item.srcPath.lastIndexOf('.') + 1);
							if (extension == 'xls' || extension == 'xlsx' ) {
								item.type = "xls";
							}
							if (extension == 'doc' || extension == 'docx' ) {
								item.type = "doc";
							}
						});
						items.videoList.forEach((item, index) => {
							item.url = config.baseUrl.concat(item.srcPath);
							item.id = "video_" + indexs + "_" + index ;
						});
					});
				});
			},
			previewImage: function(e) {
				let preImageList = [];
				preImageList = preImageList.concat(e.target.dataset.src);
				//预览图片
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: preImageList
				})
			},
			addClassCircle() {
				uni.navigateTo({
				    url: 'publish'
				});
			},
			play(id) {
				this.videoContext = uni.createVideoContext(id, this);
				this.videoContext.requestFullScreen();
			},
			fullscreenchange(e){
				if(!e.detail.fullScreen){
					this.videoContext.pause();
				}
			},
			personLogStyle() {
				const screenWidth = document.documentElement.clientWidth;
				// 调整放大倍数，这里使用屏幕宽度的八分之一作为正方形的边长
				const squareSize = screenWidth / 10;
				this.personLogWidth = squareSize;
				this.personLogHeight = squareSize;
				
				this.personWidth = screenWidth / 8;
				this.personHeight = screenWidth / 8;
				// return `width: ${squareSize}px; height: ${squareSize}px;`;
			},
			getElemWidth(selector) {
			  return new Promise((resolve, reject) => {
			    uni.createSelectorQuery().select(selector).boundingClientRect(rect => {
			      if (rect) {
			        resolve(rect.width);
			      } else {
			        reject(new Error(`Element with selector '${selector}' not found.`));
			      }
			    }).exec();
			  });
			}
		},
		computed: {
			fileStyle() {
				const screenWidth = document.documentElement.clientWidth;
				const squareSize = screenWidth / 10;
				return `width: ${squareSize}px; height: ${squareSize}px;`;
			},
			otherLogStyle() {
				const screenWidth = document.documentElement.clientWidth;
				const squareSize = screenWidth / 4.5;
				return `width: ${squareSize}px; height: ${squareSize}px;`;
			},
		},
	};
</script>

<style lang="scss">
	.publishIcon {
		position: fixed;
		bottom: 100rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background: radial-gradient(circle at center, #3377cb, #3987e5, #ffffff);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white;
		font-size: 30rpx;
	}
	page {
		background-color: $u-bg-color;
		width: 100%;
	}
	.u-page {
		padding: 0px;
	}
	.u-top {
		height: 400rpx;
		border: 1rpx solid #D8D8D8;
		width: 100%;
	}
	.u-top-context {
		display: flex;
		justify-content: space-between;
		margin-top: 200rpx;
	}
	.u-top-left {
		display: flex;
		padding-left: 30rpx;
	}
	.u-top-name {
		padding-left: 20rpx;
		padding-top: 20rpx;
	}
	.u-top-buttom {
		justify-content: flex-end;
	}
	.u-context { 
		background-color: #ffffff;
	}
	.u-context_for {
		width: 90%;
		margin: 1rpx auto;
		padding-top: 20rpx;
		display: flex;
		flex-wrap: row;
	}
	.u-context_for-bottom {
		border: 1rpx solid #D8D8D8;
	}
	.u-context-left {
		padding-right: 20rpx;
	}
	.u-context-right {
		margin-right: 20rpx;
		width: 100%;
	}
	.u-parse-text {
		font-size: 32rpx;
		white-space: pre-wrap;
		word-break: break-word;
	}
	.u-context-text {
		padding-top: 20rpx;
	}
	.uni-uploader__files {
		display:flex;
		flex-wrap:wrap;
	}
	.file-context {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.file-image{
		text-align: center;
	}
	.uni-uploader__file2_fileView {
		text-align: center;
	}
</style>
